<div class="page page-mail">
    <div class="row">

        <div class="col-sm-3 mail-categories">
            <div class="category-heading">
                <a href="#/mail/compose" class="btn btn-block btn-lg btn-primary">Compose</a>
            </div>
            <ul class="list-group">
                <li class="list-group-item active"><a href="javascript:;">
                    <i class="ti-folder"></i>Inbox
                    <span class="badge badge-info pull-right">6</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-email"></i>Send mail
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-star"></i>Starred
                    <span class="badge badge-danger pull-right">3</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-comment"></i>Chat
                    <span class="badge badge-success pull-right">9</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-pencil"></i>Draft
                    <span class="badge badge-warning pull-right">1</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-trash"></i>Spam
                </a></li>
            </ul>

            <div class="category-heading">
                <h4>Label</h4>
            </div>
            <ul class="list-group">
                <li class="list-group-item"><a href="javascript:;">
                    Work <i class="ti-control-record color-danger pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Friends <i class="ti-control-record color-info pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Family <i class="ti-control-record color-primary pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Private <i class="ti-control-record color-warning pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Classmates <i class="ti-control-record color-success pull-right"></i>
                </a></li>
            </ul>
        </div>

        <div class="col-sm-9">
            <section class="panel panel-default mail-container mail-compose">
                <div class="panel-heading">Compose Mail</div>
                <div class="panel-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="mail_to" class="col-xs-2">To:</label>
                            <div class="col-xs-10">
                                <input type="text" id="mail_to" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mail_cc" class="col-xs-2">CC:</label>
                            <div class="col-xs-10">
                                <input type="text" id="mail_cc" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mail_bcc" class="col-xs-2">BCC:</label>
                            <div class="col-xs-10">
                                <input type="text" id="mail_bcc" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mail_subject" class="col-xs-2">Subject:</label>
                            <div class="col-xs-10">
                                <input type="text" id="mail_subject" class="form-control">
                            </div>
                        </div>
                        <textarea class="form-control" rows="20"></textarea>
                    </form>
                    <div class="mail-actions">
                        <div class="btn btn-sm btn-primary">Send</div>
                        <div class="btn btn-sm btn-default">Draft</div>
                        <div class="btn btn-sm btn-default">Discard</div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>